<template>
  <div>
    <div
      v-for="item in cart"
      :key="item.id"
    >
      <input
        @change="toggleChecked(item.id)"
        type="checkbox"
        :checked="item.checked"
      />
      {{item.title}}
      {{item.count}}
      ${{item.price}}
      <button @click="deleteCartItem(item.id)">删除</button>
      <button @click="deleteCartItemAsync(item.id)">异步删除</button>
    </div>
    <div>
      <input
        @change="toggleAllCartChecked($event.target.checked)"
        type="checkbox"
        :checked="isAllCartChecked"
      />{{isAllCartChecked ? '取消全选' : '全选'}}
    </div>
    <div>
      总共{{cartTotalCount}}件商品，选中{{cartCheckedCount}}件商品， 共计{{cartTotalPrice}}，选中的商品价格{{cartCheckedPrice}}
    </div>
  </div>
</template>

<script>
import {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} from 'vuex'
import types from '@/store/types'
export default {
  computed: {
    ...mapState([
      'cart'
    ]),
    ...mapGetters([
      'cartTotalCount',
      'cartCheckedCount',
      'cartTotalPrice',
      'cartCheckedPrice',
      'isAllCartChecked'
    ])
  },
  methods: {
    ...mapMutations([
      types.deleteCartItem,
      types.toggleChecked,
      types.toggleAllCartChecked
    ]),
    ...mapActions([
      types.deleteCartItemAsync
    ])
  }
}
</script>

<style>

</style>
